單頁式應用程式（SPA）的興起

在過去，網頁主要在 Server 端生成，這些網頁包含的 JavaScript 最初只是為了向頁面添加一些簡單的動態效果，開發人員通常會仰賴當時非常熱門的 jQuery 來解決各種跨瀏覽器的 JavaScript 兼容性問題。

然而，隨著時間過去，開發人員開始在 Client 端撰寫越來越多的程式碼，讓它們成為了真正的 Web 應用程式，催生了單頁式應用程式（SPA）的興起。

單頁式應用程式（SPA）實際上是在 Client 端渲染的網頁，因此，網頁的渲染工作從 Server 端轉移到的 Client 端，現代的 Web 應用程式通常會透過後端以 API 的形式來獲取資料。

使用 Vanailla JavaScript、jQuery 構建 Web 應用程式

前端 Web 應用程式主要聚焦在：

1. 如何處理資料。
2. 如何呈現使用者介面。
3. 如何確保使用者介面和資料維持同步。

而使用 Vanilla JavaScript 和 jQuery 構建 Web 應用程式，需要處理 大量的 DOM 操作和遍歷，這導致程式碼變得難以維護，俗稱 義大利麵程式碼。

// 取得 DOM 元素
const guestsEl = document.querySelector('.guest');
const guestsPickerEl = document.querySelector('.picker');

// DOM 元素綁定監聽事件
guestsEl.addEventListener('click', function() {
	// 修改 DOM 元素的 class
	guestsEl.classList.toggle('inactive');
	guestsEl.classList.toggle('active');

	if (guestsPickerEl.style.display === 'block') {
		// 修改 DOM 元素的 style
		guestsPickerEl.style.display = 'none';
		// 修改 DOM 元素的文字內容
		guestsEl.firstElementChild.textContext = 'Add guests';
	} else {
		// 修改 DOM 元素的 style
		guestsPickerEl.style.display = 'block';
		// 修改 DOM 元素的文字內容
		guestsEl.firstElementChild.textContext = '';
	}
});

前端框架存在的原因

1. 保持使用者介面與資料的同步 是相當複雜的任務，而前端框架的出現解決了這個問題點，儘管不同的框架有不同的實現方式，但都致力於達成這一目標。
2. 框架提供了合適的方式來 撰寫 和 組織 程式碼，有助於解決 義大利麵程式碼 的問題。
3. 框架為開發人員和團隊 提供統一的方法，用於構建前端應用程式。

什麼是 React？

React 是一個用於構建使用者介面的 JavaScript Library，由 Facebook 開發和維護，被廣泛應用於現代 Web 應用程式的前端開發，具有以下的特點：

1. 元件化：元件是 React 中最基本的概念，每個元件都有屬於自己的狀態（state）和屬性（props），這讓程式碼更容易管理和重用。
2. Virtual DOM：React 使用 Virtual DOM 來最小化實際 DOM 的操作。
3. 單向資料流：這意味著資料只會單向流動，通常是從父元件到子元件，這樣程式碼更容易掌控且容易理解。
4. JSX：JSX 是一個 JavaScript 語法擴充，允許在 JavaScript 中直接撰寫類似 HTML 的程式碼。
5. 生態系：React 擁有龐大的生態系，包括 React Router（用於路由管理）、Redux（用於狀態管理）、React Native（用於移動應用程式開發）等等。

結語

使用 Vanailla JavaScript 和 jQuery 在面對大量 DOM 操作時變得困難且難以維護，而前端框架的出現解決了這個問題。

它們的核心目標是保持使用者介面和資料的同步，為開發者提供了更好的組織和編寫程式碼的方式。